<template>
<div class="header">
    <mt-header :title="title" fixed>
        <template v-if="type==1">
            <a slot="left" @click="silder" class="iconfont icon-msnui-menu" style="color:#ffffff">
            </a>
            <a class="perImg"  slot="right" @click="personInfo">
                <img src="/static/img/audit_details_01.png" />
            </a>
        </template>
        <template v-if="type==2&&!show_check_box">
            <a slot="left" @click="silder" class="iconfont icon-msnui-menu" style="color:#ffffff">
            </a>
            <a v-if="message!='0'" slot="right" @click="startChoose" class="iconfont icon-720bianjiqi_quanxuan" style="color:#ffffff">
            </a>
            <a slot="right" @click="search" class="iconfont icon-sousuo" style="color:#ffffff">
            </a>
        </template>
        <template v-if="(type==2 || type==4)&&show_check_box">
            <a slot="left" @click="allSelect" class="head-button all-select" style="color:#ffffff">全选</a>
            <a slot="left" @click="cancel" class="head-button all-cancel" style="color:#ffffff">取消</a>
            <a slot="right" @click="doOperate" class="head-button" style="color:#ffffff">{{ message }}</a>
        </template>
        <template v-if="type==3">
            <a slot="left" @click="back" class="iconfont icon-htmal5icon37" style="color:#ffffff">
            </a>
        </template>
         <template v-if="type==4&&!show_check_box">
            <a slot="left" @click="back" class="iconfont icon-htmal5icon37" style="color:#ffffff">
            </a>
             <a v-if="message!='0'" slot="right" @click="startChoose" class="iconfont icon-720bianjiqi_quanxuan" style="color:#ffffff">
            </a>
            <a slot="right" @click="search" class="iconfont icon-sousuo" style="color:#ffffff">
            </a>
        </template>        
    </mt-header>
</div>
</template>
<script>
import { Header, Button } from 'mint-ui'
import { mapState, mapMutations } from 'vuex'
export default {
    components: { Header, Button },
    props: {
        title: {
            type: String,
            default() { return '首页' }
        },
        type: {
            type: Number,
            default() { return 1 }
        },
        message: {
            type: String,
            default() { return '0' }
        }
    },
    computed: {
        ...mapState( [ 'show_check_box' ] )
    },
    methods: {
        ...mapMutations( [ 'UPDAT_SHOW_CHECK_BOX' ] ),
        allSelect() {
            this.$emit('allselect')
        },
        back() {
            this.$router.back()
        },
        cancel() {
            this.UPDAT_SHOW_CHECK_BOX(false)
            this.$emit('cancel')
        },
        doOperate() {
            this.$emit('submit')
        },
        personInfo() {
            this.$router.push( { name: 'person' } )
        },
        search() {
          this.$router.push( { name: 'search' } )
        },
        silder() {
            this.$router.push( { name: 'silder' } )
        },
        startChoose() {
            this.UPDAT_SHOW_CHECK_BOX(true)
        },
    },
}
</script>
<style>
.header{
    position: fixed;
    z-index: 1000;
}
.head-button{
    font-size: 1.6rem;
}
.all-select{
    position: relative;
    left: 4px;
}
.all-cancel{
    position: relative;
    left: 20px;
}
</style>
